<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理系统</title>
</head>
<body>
    <div id="app">
        <router-view />
    </div>
</body>
<style>
    *{margin:0; padding:0;}
    html, body, #app{width: 100%;height:100%;}
    .container{
        height:100%;
        display: flex;
        flex-direction: column;
    }
    .top{
        flex: 1;
        background-color: #fff;
        display: flex;
        border-bottom: solid 1px rgba(47,64,86,.3);
    }
    .top > h1{
        flex:1;
        align-self: center;
        text-align: center;
    }
    .left-main{
        flex: 10;
        display: flex;
        flex-direction: row;
    }
    .left{
        flex:1;
        border-right: solid 1px rgba(47,64,86,.3);
    }
    .main{
        flex:10;
    }
</style>
<script src="vue.js"></script>
<script src="vue-router.min.js"></script>
<script>
    const UserComponent = {
        data(){
            return {
                user_list:[
                    {id: 1, name: '张三', age:17},
                    {id: 2, name: '李四', age:18},
                    {id: 3, name: '王五', age:19},
                    {id: 4, name: '赵六', age:20},
                ]
            };
        },
        template: `
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>详情</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="user in user_list" :key="user.id">
                            <td>{{ user.id }}</td>
                            <td>{{ user.name }}</td>
                            <td>{{ user.age }}</td>
                            <td @click="userInfo(user.id)">编辑</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        `,
        methods: {
            userInfo: function(user_id){
                this.$router.push(`/user/info/${user_id}`)
            },
        }
    };
    const UserInfoComponent = {
        props: ['user_id'],
        template: `
            <div>
                <div>用户详情：{{ user_id }}</div>
                <button @click="goBack">后退</button>
            </div>
        `,
        methods:{
            goBack: function(){
                this.$router.go(-1)
            }
        }
    };
    const PrivilegeComponent = {
        template: `
            <div>PrivilegeComponent</div>
        `
    };
    const GoodsComponent = {
        template: `
            <div>GoodsComponent</div>
        `
    };
    const OrderComponent = {
        template: `
            <div>OrderComponent</div>
        `
    };
    const SystemSettingComponent = {
        template: `
            <div>SystemSettingComponent</div>
        `
    };

    const AppComponent = {
        data(){
            return {
                menu_list: [],
            };
        },
        mounted(){
            setTimeout(() => {
                this.menu_list = [
                    {id: 1, name: "用户管理", url: "/user"},
                    {id: 2, name: "权限管理", url: "/privilege"},
                    {id: 3, name: "商品管理", url: "/goods"},
                    {id: 4, name: "订单管理", url: "/order"},
                    {id: 5, name: "系统设置", url: "/system-setting"},
                ]}, 300);
        },
        template:
        `
            <div class="container">
                <div class="top">
                    <h1>后台管理系统</h1>
                </div>
                <div class="left-main">
                    <div class="left">
                        <div v-for="item in menu_list">
                            <router-link :to="item.url" :key="item.id">{{ item.name }}</router-link>
                        </div>
                    </div>
                    <div class="main">
                        <router-view />
                    </div>
                </div>
            </div>
        `,
    };

    let router = new VueRouter({
        routes:[
            {
                name: 'app',
                path: '/',
                component: AppComponent,
                redirect: "/user",
                children: [
                    {
                        path: "/user",
                        component: UserComponent,
                    },
                    {
                        path: "/user/info/:user_id",
                        component: UserInfoComponent,
                        props: true,
                    },
                    {
                        path: "/privilege",
                        component: PrivilegeComponent,
                    },
                    {
                        path: "/goods",
                        component: GoodsComponent,
                    },
                    {
                        path: "/order",
                        component: OrderComponent,
                    },
                    {
                        path: "/system-setting",
                        component: SystemSettingComponent,
                    },
                ],
            }
        ]
    });

    new Vue({
        el: "#app",
        router
    });
</script>
</html>